.root
  display flex
  align-items center
  user-select none
  vertical-align middle
  width 96%
  overflow-x auto
  white-space nowrap
  top 50px
  position absolute
  &::-webkit-scrollbar
    height 8px

.tag
  display flex
  align-items center
  margin 0px 2px 2px
  padding 2px 4px
  background-color alpha($ui-tag-backgroundColor, 3%)
  border-radius 4px
  position relative
  clearfix()

.tag-removeButton
  margin 0
  padding 0
  border-style solid
  border-width 0
  border-radius 20px
  background-color transparent
  color $ui-button-color
  position absolute
  right 6px

.tag-removeButton-icon
  width 5px
  padding-right 4px

.tag-label
  font-size 13px
  color $ui-text-color
  padding 4px 16px 4px 8px
  cursor pointer

body[data-theme="dark"]
  .tag
    background-color alpha($ui-dark-tag-backgroundColor, 60%)

  .tag-removeButton
    border-color $ui-button--focus-borderColor
    background-color transparent
    color $ui-button-color

  .tag-label
    color $ui-dark-text-color

apply-theme(theme)
  body[data-theme={theme}]
    .tag
      background-color get-theme-var(theme, 'tag-backgroundColor')

    .tag-removeButton
      border-color $ui-button--focus-borderColor
      background-color transparent

    .tag-label
      color get-theme-var(theme, 'text-color')

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)